<template>
	<view>
		<!-- 普通弹窗 background-color="#ffffff" -->
		<uni-popup :is-mask-click="false" ref="popup" type="center">
			<view>
				<view class="w-pop" style="background: #ffffff;">
					<view class="base-title">登录密码</view>
					<!-- <view class="item-box">
						<view class="label-box">原始密码：</view>
						<input type="password" :placeholder="!userInfo.pwdSetState?`首次设置无需填写`:`*请填写原密码`" class="inp-box" v-model="formData.originPwd">
					</view> -->
					<view class="item-box">
						<view class="label-box">新密码：</view>
						<input type="password" placeholder="*请填写新密码，8-16位，须含字母数字" class="inp-box"
							v-model="formData.newPwd">
					</view>
					<view class="item-box">
						<view class="label-box">确认新密码：</view>
						<input type="password" placeholder="*请确认新密码，8-16位，须含字母数字" class="inp-box"
							v-model="formData.confirmPwd">
					</view>
					<view class="item-box">
						<view class="label-box">验证码：</view>
						<view class="phone-txt">手机号{{getPhone(userInfo.mobile)}}</view>
						<view class="flex item-center">
							<input type="text" placeholder="*请填写验证码" class="inp-box" v-model="formData.smsCode">
							<button type="primary" class="get-code-btn" @click="getCode"
								:class="{'unactive':codeTime>0}"
								:disabled="codeTime>0">{{codeTime>0? codeTime+'s' :'发送验证码'}}</button>
						</view>
					</view>
					<view class="flex item-center btn-box">
						<view class="cancal-btn" @click="showPop(false)">取消</view>
						<view class="submit-btn" @click="submit">保存</view>
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		useUserStore
	} from '@/stores/modules/user.js'
	import {
		ref,
		reactive,
		defineEmits,
		computed
	} from 'vue';
	import {
		uploadFileApi
	} from '@/api/common.js'
	import {
		updatePwd,
		sendSms
	} from '@/api/auth.js'
	const userStore = useUserStore()
	let userInfo = computed(() => {
		return userStore.userInfo || {}
	})
	const emit = defineEmits(['refresh'])
	const originData = () => ({
		originPwd: '',
		newPwd: '',
		confirmPwd: '',
		smsCode: ''
	});
	const formData = ref(originData())
	const popup = ref()
	const codeTime = ref(null)
	const codeFn = ref(null)
	const showPop = async (value) => {
		if (value) {
			popup.value && popup.value.open('center')
		} else {
			if(codeFn.value){
				clearInterval(codeFn.value)
				codeFn.value = null
				codeTime.value = null
			}
			
			Object.assign(formData.value, originData());
			popup.value && popup.value.close()
		}
	}
	const getPhone = (phone) => {
		return phone.replace(phone.substring(3, 7), "****")
	}
	
	// 获取短信验证码
	const getCode = async () => {
		if (codeTime.value > 0) {
			return
		}
		uni.showLoading()
		let result = await sendSms({
			mobile: userInfo.value.mobile,
			type: 6
		})
		if (result) {
			uni.showToast({
				icon: 'none',
				title: '短信已发送，请注意查收'
			})
			codeTime.value = 60
			codeFn.value = setInterval(() => {
				if (codeTime.value <= 0) {
					clearInterval(codeFn.value)
					codeFn.value = null
					codeTime.value = null
				} else {
					codeTime.value = codeTime.value - 1
				}
			}, 1000)
		}
		uni.hideLoading()
	}
	const submit = async () => {
		// if (!formData.value.originPwd) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '请填写原始密码'
		// 	})
		// 	return
		// }
		if (!formData.value.newPwd) {
			uni.showToast({
				icon: 'none',
				title: '请填写新密码'
			})
			return
		}
		if (!formData.value.confirmPwd) {
			uni.showToast({
				icon: 'none',
				title: '请填写确认新密码'
			})
			return
		}
		if (formData.value.confirmPwd != formData.value.newPwd) {
			uni.showToast({
				icon: 'none',
				title: '新密码和确认新密码不一致'
			})
			return
		}
		if((formData.value.confirmPwd+'').length<8 || (formData.value.confirmPwd+'').length>16){
			uni.showToast({
				icon: 'none',
				title: '请确认新密码，8-16位，必须包含字母、数字'
			})
			return
		}
		let reg =/^(?=.*\d+)(?=.*[A-Za-z]+)[\w]{8,16}$/
		if(!reg.test((formData.value.confirmPwd+''))){
			uni.showToast({
				icon: 'none',
				title: '请确认新密码，8-16位，必须包含字母、数字'
			})
			return
		}
		if (!formData.value.smsCode) {
			uni.showToast({
				icon: 'none',
				title: '请填写短信验证码'
			})
			return
		}
		// let result = await updatePwd(formData.value)
		updatePwd(formData.value).then(result => {
			if (result) {
				uni.showToast({
					icon: 'none',
					title: '修改成功'
				})
				Object.assign(formData.value, originData());
				userStore.getUserInfo()
				showPop(false)
			} else {
				uni.showToast({
					icon: 'none',
					title: '保存失败'
				})
			}
		}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.message
				})
		})
		// if (result) {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '修改成功'
		// 	})
		// 	Object.assign(formData.value, originData());
		// 	showPop(false)
		// } else {
		// 	uni.showToast({
		// 		icon: 'none',
		// 		title: '保存失败'
		// 	})
		// }
	}
	defineExpose({
		showPop
	})
</script>

<style scoped lang="scss">
	.pick {
		font-size: 40px;
		// font-weight: 400;
		color: rgba(51, 51, 51, .61);
	}

	.w-pop {
		background: #ffffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 320px;
	}

	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}

	.item-box {
		margin: 10px 20px;
	}

	.label-box {
		font-size: 14px;
		font-weight: 600;
		line-height: 20px;
		color: rgba(51, 51, 51, 1);
		margin: 6px 0;
	}

	.inp-box {
		background: rgba(245, 245, 245, 1);
		height: 44px;
		border-radius: 12px;
		padding: 0 10px;
		line-height: 44px;
		border: 1px solid rgba(245, 245, 245, 1);

		&.unactive {
			border-color: #FA4543;
		}
	}

	.btn-box {
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}

	.cancal-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		// line-height: 24px;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
		border-right: 1px solid rgba(0, 0, 0, 0.1);
	}

	.submit-btn {
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		// line-height: 24px;
		text-align: center;
		color: rgba(250, 69, 67, 1);
	}

	.phone-txt {
		font-family: PingFang SC;
		font-size: 12px;
		font-weight: 400;
		line-height: 17px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(51, 51, 51, 0.6);
		margin-bottom: 14px;
	}

	.get-code-btn {
		width: 40%;
		background: #00AEFF;
		height: 44px;
		line-height: 44px;
		// margin-bottom: 20px;
		font-size: 14px;
		margin-right: 0;
		margin-left: 10px;

		&.unactive {
			background: #0ac6ff!important;
		}
	}
</style>
